<template>
    <div class="info">
        <div class="cov">
            <div class="title">病毒信息</div>
            <div class="convMessage" v-for="convNew in news" :key="convNew.id">
                <div class="header">
                    <span>来源:{{convNew.infoSource}}</span>
                    <span>链接: <a :href="convNew.sourceUrl" target="_blank">央视新闻app</a> </span>
                    <span>时间:{{convNew.pubDateStr}}</span>
                </div>

                <div class="convDetailMessage">
                    <span class="covTitle">{{convNew.title}}</span>
                    <p>{{convNew.summary}}</p>
                </div>
            </div>
        </div>

        <div class="hot">
            <div class="title">
                <img src="../../../assets/image/hot.png" width="60px" alt="">
                <a class="more">查看更多 <img src="../../../assets/image/more.png" alt="" width="10px"> </a>
            </div>

            <ul>
                <li v-for="item in news" :key="item.id">
                    <div class="hot-left">
                        <span>
                            <img src="../../../assets/image/hot-icon.png" alt="" width="30px">
                        </span>
                        <div class="hotMessage">
                            <a :href="item.sourceUrl">{{item.title}}</a>
                        </div>
                    </div>

                    <div class="hot-right">
                        <img src="../../../assets/image/more.png" alt="" width="10px">
                    </div>

                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CovInfo",
        props: ['news'],
    }
</script>

<style scoped lang="less">
    .info {
        padding: 0.2rem;

        .title{
            border-left: 0.1rem solid rgb(20,40,128);
            padding-left: 0.1rem;
            margin-bottom: 0.2rem;
        }

        .cov {
            .convMessage {
                color: #666;
                line-height: 0.4rem;
                .header {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 0.2rem;
                }
                a{
                    color: #000;
                    text-decoration: none;
                }

                .convDetailMessage{
                    margin: 0.2rem 0;
                    .covTitle{
                        font-size: 16px;
                        font-weight: bold;

                    }
                    p{
                        text-indent: 2em;
                    }

                }
            }
        }

        .hot {
            .title {
                display: flex;
                justify-content: space-between;
                .more {
                    color: blue;
                }
            }
            li {
                display: flex;
                justify-content: space-between;
                margin-top: 0.2rem;
                .hot-left{
                    display: flex;
                    justify-content: flex-start;
                }
                .hotMessage {
                    color: #888;
                    margin-left: 0.5rem;
                    a {
                        color: #000;
                        text-decoration: none;
                    }
                }
            }

        }

    }
</style>
